<template>
  <div class="login">
    <!-- 表单区域 -->
    <el-form ref="myform" :model="form" class="myform" :rules="rules">
      <!-- 标题区域 -->
      <h3>iHRM 后台登录系统</h3>
      <!-- 两个输入框 -->
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" show-password prefix-icon="el-icon-lock" />
      </el-form-item>
      <!-- 登录按钮 -->
      <el-form-item>
        <el-button :loading="loading" class="mybtn" type="primary" @click="login">登录</el-button>
      </el-form-item>
      <!-- 链接 -->
      <el-form-item>
        <a class="link" href="#">还不帐号？立即注册</a>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { loginAPI } from '@/api/user.js'
import { mapActions } from 'vuex'
export default {
  // 导入登录的方法
  data() {
    return {
      // 按钮的加载效果
      loading: false,
      // 表单的数据源
      form: {
        mobile: '13800000002', // 手机号
        password: '123456' // 密码
      },
      rules: {
        mobile: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          // 设置一个自定义校验规则: 必须满足手机号的正则
          {
            validator: (rule, value, callback) => {
              // value：要校验的数据
              // callback：判断是否校验通过
              //  通过：callback()
              //  不通过： callback(new Error('错误信息'))
              // 1.0 定义一个手机号的正则
              var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              // 2.0 匹配手机号是否满足正则
              var bool = reg.test(value)
              // 3.0 判断返回值
              if (bool) {
                callback()
              } else {
                callback(new Error('手机号不合法'))
              }
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }, // 必填
          { min: 6, max: 6, message: '长度必须是 6 个字符', trigger: 'blur' } // 密码长度必须为 6
        ]
      }
    }
  },
  methods: {
    ...mapActions({
      mylogin: 'user/login'
    }),
    // 点击登录按钮会触发这个方法
    login() {
      // 完成全局的表单校验
      this.$refs.myform.validate(async valid => {
        // valid 返回的是校验是否通过
        //    true：通过
        //    false：不通过
        if (valid) {
          console.log('校验通过')
          // 将加载效果改为true
          this.loading = true
          // 直接调用 vuex 中 user 模块下的 actions 中的 login 方法
          // 注意点：这里是会发送网络请求的，网络请求需要时间的
          // 后续的代码应该是等待这个网络请求结束之后，再执行
          // 为了达到这个目的：我们需要在这个方法前添加一个 await
          //  就可以等待网络请求结束后后续代码才执行
          setTimeout(async () => {
            try {
              await this.mylogin(this.form)
              // // 跳转到主页
              // this.$router.push('/')
              // 添加一个判断：判断参数 _redirect 是否存在
              // // 直接跳转到首页
              // this.$router.push('/')
              // 接收参数
              const _redirect = this.$route.query._redirect
              // 判断参数是否存在
              if (_redirect) {
                // 跳转到之前的页面中
                this.$router.push(_redirect)
              } else {
                // 跳转到首页
                this.$router.push('/')
              }
              // 关闭加载效果
              this.loading = false
              // 提示登录成功
              this.$message.success('登录成功')
            } catch (error) {
              // 提示错误信息
              console.log(error.message)
              // 显示在页面上
              this.$message(error.message)
              // 关闭加载动画
              this.loading = false
            }
          }, 3000)
          // // 发送网络请求
          // const res = await loginApi(this.form)
          // // 直接将 token 保存起来
          // console.log(res)
        } else {
          console.log('校验不通过')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login {
  background-image: url('../../assets/common/login.jpg');
  background-position: center;
  height: 100%;
  position: relative;
  .myform {
    width: 520px;
    height: 400px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 35px;
    box-sizing: border-box;
    h3 {
      color: #fff;
      font-size: 50px;
      font-weight: 200;
      text-align: center;
    }
    input.el-input__inner {
      height: 50px;
      background-color: #d4e5ff;
      color: #68b0fe;
    }
    .mybtn {
      width: 100%;
      height: 60px;
      font-size: 24px;
      background-color: #407ffe;
    }
    .link {
      display: block;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
